import React, { useState } from 'react'
import { Table, Button, Pagination, Popconfirm } from 'antd';
import { useEffect } from 'react';
// import { getUserListApi } from '../../apis/user';
// import { delAccountApi } from '../../apis/user';
import { authModes } from '../../components/AuthComponent';
import AuthComponent from '../../components/AuthComponent';
import { useSelector,useDispatch } from 'react-redux';
import * as usersModule from '../../store/modules/users'
import moment from 'moment/moment'
export default function AccountsList() {
  const columns = [
    {
      title: '用户名',
      dataIndex: 'account',
    },
    {
      title: '角色',
      dataIndex: 'userGroup',
    },
    {
      title: '会员日期',
      dataIndex: 'updateDate',
      render: ((date) => {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    {
      title: '操作',
      render: (_, record) => (
        <Popconfirm
          placement="topLeft"
          title='确认删除该用户？'
          onConfirm={() => confirm(record._id)}
          okText="确认"
          cancelText="取消"
        >
          <AuthComponent auth='del_account' authMode={authModes.openOrDisabled}>
            <Button type="primary" danger>删除</Button>
          </AuthComponent>
        </Popconfirm>
      ),
    },
  ];
  // 设置用户数据
  // const [data, setData] = useState([])
  // 设置每页数量
  // const [loading, setloading] = useState(false)
  // const [total, setTotal] = useState(0)
  // 类似于mounted的生命周期函数
  useEffect(() => {
    dispatch(usersModule.getData())
  }, [])
  const dispatch=useDispatch()
  const {data,total,loading}=useSelector((state)=>{
    console.log('useState',state);
    return state.users
  })
 
  // 获取用户数据
  // async function getData(params = { pageSize: 5, pageNumber: 1 }) {
  //   setloading(true)
  //   let res = await getUserListApi(params)
  //   console.log('用户信息', res);
  //   setData(res.data)
  //   setTotal(res.totalCount)
  //   setloading(false)

  // }
  //  分页
  function onChange(pageNumber, pageSize) {
    console.log('分页', pageSize, pageNumber);
    // getData({ pageSize: pageSize, pageNumber: pageNumber })
    dispatch(usersModule.getData({pageSize,pageNumber}))
  }
  // 确认删除
  async function confirm(_id) {
    dispatch(usersModule.delData(_id))
  }
  return (
    <Table
      loading={loading}
      rowKey={'_id'}
      columns={columns}
      dataSource={data}
      pagination={{
        total,
        pageSize: 5,
        onChange
      }}

    />
  )
}
